<template>
	<view class="agent">
		<view v-show="!loading" class="flex-1 flex flex-column" style="overflow: hidden;">
			<block v-if="status === 'form'">
				<view class="steps">
					<view class="step-item" :class="[{'current-step': step === item.value}, {'active-step': step > item.value}]" v-for="item in steps" :key="item.value" @click="changeStep(item)">
						<view class="title">{{item.label}}</view>
						<view class="sub-title">{{item.text}}</view>
					</view>
				</view>
				
				<!-- 代理商表单 -->
				<agent-form ref="form" v-show="step === 1" :type="type" style="flex: 1;height: 100%;overflow: hidden;" @next="next" @getInfo="getInfo"></agent-form>
				
				<!-- 产品列表 -->
				<product-list ref="product" v-show="step === 2" style="flex: 1;height: 100%;overflow: hidden;" @next="next" @back="back"></product-list>
				
				<!-- 确认订单 -->
				<submit-order ref="submit" v-if="step === 3" style="flex: 1;height: 100%;overflow: hidden;" :cartIds="cartIds" @success="submitSuccess" @fail="SubmitFail" @back="back"></submit-order>
			</block>
			
			<!-- 完成 -->
			<com-complete ref="complete" v-else :payStatus="payStatus" :from="from" :orderId="orderId" @reset="handleReset"></com-complete>
		</view>
	</view>
</template>

<script>
	import AgentForm from './components/agent-form.vue';
	import ProductList from './components/product-list.vue';
	import SubmitOrder from './components/submit-order.vue';
	import ComComplete from './components/com-complete.vue';
	
	export default {
		components: { AgentForm, ProductList, SubmitOrder, ComComplete },
		data() {
			return {
				steps: [
					{ label: '上传资料', text: '填写信息', value: 1 },
					{ label: '选购产品', text: '支付订金', value: 2 },
					{ label: '支付订金', text: '完成申请', value: 3 },
				],
				step: 1,
				status: 'form',	//	form: 表单; complete: 完成
				type: 'add', // 
				orderId: '',
				cartIds: [],
				payStatus: true,
				from: '', // baseInfo 修改 其他：新建申请
				loading: true
			};
		},
		onLoad(options) {
			this.step = 1
			this.from = options.from
		},
		onUnload() {
			uni.$off('changeAddress')
		},
		onShareAppMessage(){},
		onShareTimeline() {},
		methods: {
			handleReset() {
				this.step = 1;
				this.status = 'form';
				this.payStatus = true
				// this.$refs.form.reset();
				// this.$refs.product.reset();
				// this.$refs.submit.reset();
				// this.$refs.complete.reset();
			},
			changeStep(item) {
				// this.step = item.value
			},
			next() {
				this.step ++
			},
			back(step=1) {
				if (step > 1) {
					this.type = 'edit'
				} else {
					this.type = 'add'
				}
				this.step = this.step - step
			},
			// 提交支付成功
			submitSuccess(orderId) {
				this.orderId = orderId
				this.payStatus = true
				setTimeout(()=> {
					this.status = 'complete'
				}, 1200)
			},
			// 提交支付失败
			SubmitFail(orderId) {
				this.orderId = orderId
				this.payStatus = false
				setTimeout(()=> {
					this.status = 'complete'
				}, 1200)
			},
			// 获取信息
			getInfo(value) {
				console.log('getInfo', value);
				this.loading = false
				if (value.is_agent === 100) {
					this.orderId = value.order_gid
					this.payStatus = false
					this.status = 'complete'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.agent {
		flex: 1;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

		.steps {
			// position: sticky;
			// top: 0;
			// z-index: 999;
			display: flex;
			align-items: center;
			padding: 52rpx 14rpx;
			justify-content: space-between;

			.step-item {
				position: relative;
				flex: 1;
				display: flex;
				align-items: center;
				flex-direction: column;
				padding-top: 32rpx;

				&:before {
					position: absolute;
					content: '';
					top: 0;
					width: 16rpx;
					height: 16rpx;
					border-radius: 999px;
					box-sizing: border-box;
					border: 1px solid #DCDCDC;
				}

				&::after {
					position: absolute;
					content: '';
					top: 4rpx;
					right: 60%;
					width: 80%;
					height: 1px;
					background-color: #DCDCDC;
				}

				&:first-child::after {
					background-color: transparent;
				}
			}

			.title {
				font-size: 14px;
				font-weight: 400;
				line-height: 22px;
				text-align: center;
				color: rgba(0, 0, 0, 0.4);
			}

			.sub-title {
				padding-top: 8rpx;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 40rpx;
				text-align: center;
				color: rgba(0, 0, 0, 0.4);
			}

			.current-step {
				.title {
					color: rgba(124, 123, 152, 1.0);
					font-weight: 600;
				}

				&:before {
					box-sizing: border-box;
					border: 1px solid rgba(124, 123, 152, 1.0);
					background-color: rgba(124, 123, 152, 1.0);
				}

				&::after {
					position: absolute;
					content: '';
					top: 4rpx;
					right: 60%;
					width: 80%;
					height: 1px;
					background-color: rgba(124, 123, 152, 1.0);
				}
			}

			.active-step {
				.title {
					color: rgba(0, 0, 0, 0.9);
				}

				&:before {
					box-sizing: border-box;
					border: 1px solid rgba(124, 123, 152, 1.0);
				}

				&::after {
					position: absolute;
					content: '';
					top: 4rpx;
					right: 60%;
					width: 80%;
					height: 1px;
					background-color: rgba(124, 123, 152, 1.0);
				}
			}

		}

	}
</style>